<template>
  <div class="view-comment-item">
    <div class="view-comment-author">
      <a class="">
        <el-image  style="width: 40px; height: 40px" :src="require('@/assets/avatar.jpg')" fit="fill"></el-image>
      </a>
      <div class="view-info">
        <span style="font-size: 18px;">{{comment.account}}</span>
        <div class="view-meta">
          <span>{{rootCommentCounts - index}}楼</span>
          <span>&nbsp&nbsp&nbsp&nbsp&nbsp</span>
          <span>{{comment.createTime}}</span>
        </div>
      </div>
    </div>
    <div>
      <p style="line-height: 3.5;margin-left: 50px">{{comment.content}}</p>
      <div class="view-comment-tools">
<!--        子级评论-->
        <a class="view-comment-tool" @click="showComment(-1,comment)">
          <i class="icon-comment"></i>&nbsp; 评论回复
        </a>
      </div>

      <div class="reply-list">
        <div class="reply-item" v-for="c in comment.childrens" :key="c.id">
          <div style="font-size: 14px">
            <span class="reply-user">{{comment.account}}:&nbsp;&nbsp;</span>

            <span v-if="c.level === 2" class="reply-user">回复{{comment.account}} </span>

            <span>{{c.content}}</span>
          </div>
          <div class="view-meta">
            <span style="padding-right: 10px">{{c.createTime}}</span>
          </div>

        </div>

        <div class="view-comment-write" v-show="commentShow">

          <el-input
            v-model="reply.content"
            type="input"
            style="width: 90%"
            :placeholder="placeholder"
            class="view-comment-text"
            resize="none">
          </el-input>
          <el-button style="margin-left: 8px" @click="publishComment()" type="text">评论</el-button>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {getCommentList, publishComment} from "@/api/comment";
import {getArticleById} from "@/api/article";

export default {
  name: "commentItem",
  props: {
    articleId: String,
    comment: Object,
    index: Number,
    rootCommentCounts: Number
  },
  data() {
    return {
      placeholder: '你的评论...',
      commentShow: false,
      commentShowIndex: '',
      reply: this.getEmptyReply()
    }
  },
  methods: {
    //展示子评论框
    showComment(commentShowIndex, toUser) {
      this.reply = this.getEmptyReply()

      if (this.commentShowIndex !== commentShowIndex) {
        if (toUser) {
          this.placeholder = `回复${toUser.account} `
          this.reply.toUserId = toUser.authorId
        } else {
          this.placeholder = '你的评论...'
        }

        this.commentShow = true
        this.commentShowIndex = commentShowIndex
      } else {
        this.commentShow = false
        this.commentShowIndex = ''
      }
    },
    publishComment() {
      if (!this.reply.content) {
        this.$message({type: 'warning', message: '评论为空哦', showClose: true})
        return;
      }
      //todo 评论回复显示
      publishComment(this.reply,this.$store.state.token).then(res => {
        if(res.data.success){
          this.$message({type: 'success', message: '评论成功', showClose: true})
          if(!this.comment.childrens){
            this.comment.childrens = []
          }
          this.comment.childrens.unshift(res.data.data)
          this.$emit('commentCountsIncrement')
          this.showComment(this.commentShowIndex)
          this.findCommentList()
        }else{
          this.$message({type: 'error', message: res.data.msg, showClose: true})
        }
      }).catch(error => {
        if (error !== 'error') {
          this.$message({type: 'error', message: '评论失败', showClose: true})
        }
      })
    },
    findCommentList() {
      var id = this.$route.params.id;
      getCommentList(id).then((res)=>{
        if(res.data.success){
          this.comments = res.data.data;
        }else {
          this.$message.error(res.data.msg)
        }
      }).catch((err)=>{
        this.$message.error("系统错误")
      })
    },
    getEmptyReply() {
      return {
        articleId: this.articleId,
        parent: this.comment.id,
        toUserId: '',
        content: ''
      }
    }
  }
}
</script>

<style>
  .view-tag-item {
    margin: 0 4px;
  }

  .view-comment {
    margin-top: 60px;
  }

  .view-comment-title {
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
  }

  .view-comment-write {
    margin-top: 20px;
  }

  .view-comment-text {
    font-size: 16px;
  }

  .v-show-content {
    padding: 8px 25px 15px 30px !important;
  }

  .v-note-wrapper .v-note-panel {
    box-shadow: none !important;
  }

  .view-comment-item {
    margin-top: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
  }

  .view-comment-author {
    margin: 10px 0;
    vertical-align: middle;
  }

  .view-comment-tools {
    margin-top: 4px;
    margin-bottom: 10px;
  }

  .view-comment-tool {
    font-size: 13px;
    color: #a6a6a6;
    padding-right: 14px;
  }

  .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
    background: #fff !important;
  }

  .reply-list {
    padding-left: 16px;
    border-left: 4px solid #c5cac3;
  }

  .reply-item {
    margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }

  .reply-user {
    color: #78b6f7;
  }
</style>
